<template>
	<view class="item-box">
		<view class="dd" @click="toDetail">
			<view class="dd-top">
				<view class="dd-q">
					运单编号：{{item.waybill_sn || ''}}
				</view>
				<view class="dd-p" >
					{{statusText}}
				</view>
			</view>
			<view class="dd-dd">
				<p>运费：{{item.freight || '0.00'}}</p>
				<p>保证金：{{item.bond || '0.00'}}</p>
				<p>应垫资金额：{{item.should_advance_amount || '0.00'}}</p>
				<p>路由：{{lineStr}}</p>
			</view>
			<view class="dd-btn">
				<view class="dd-btn-box">
					<button size="mini" type="primary" @click="fareAddApply">增加车费</button>
					<button size="mini" type="primary" @click="fareApply">申请车费</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "car-order-item",
		props: {
			item: {
				type: Object,
			},
		},
		data() {
			return {
				status_text_array: ['', '未扫码','已扫码','已发车','待配送','已到达']
			};
		},
		methods: {
			toDetail() {
				let data = this.item;
				this.$emit('toDetail', data);
			},
			fareAddApply() {
				let data = this.item;
				this.$emit('fareAddApply', data);
			},
			fareApply() {
				let data = this.item;
				this.$emit('fareApply', data);
			},
		},
		computed: {
			name() {
				return '999' 
			},
			lineStr() {
				let json_line_arr = this.item.array_line
				let fields = json_line_arr.map(item => `${item.outlet_name}`).join("-");
				return fields;
			},
			statusText() {
				let status_text =  this.status_text_array[this.item.status];
				return status_text;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item-box {
		.dd {
			margin-top: 12px;
			width: 100%;
			padding-bottom: 10px;
			background: #FFFFFF;
			box-shadow: 0px 0px 6px 0px rgba(204, 204, 204, 0.5);
			border-radius: 8px;
		}

		.dd-top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px dashed #CCCCCC;
		}

		.dd-q {
			font-size: 18px;
			font-weight: 500;
			margin-left: 20px;
			line-height: 50px;

		}

		.dd-p {
			font-size: 18px;
			font-weight: 600;
			color: #1890FF;
			line-height: 50px;
			margin-right: 20px;
		}

		.dd-dd {
			overflow: hidden;
			width: 90%;
			margin: 0 auto;
		}

		.dd-dd>p {
			line-height: 40px;
			float: left;
			width: 50%;
			font-size: 16px;
			font-weight: 400;
		}
		.dd-btn{
			.dd-btn-box{
				display: flex;
			}
		}
	}
</style>